<template>
  <div>
    <van-tabs v-model="active" @click="btn">
      <van-tab v-for="item in brotherCategory" :title="item.name" :key="item.id">
        <div>
          <div class="title">{{currentCategory.name}}</div>
          <div class="txt">{{currentCategory.front_name}}</div>
            <ProductList :goodsList="goodsList" />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
 
<script>
import ProductList from "../components/popup/ProductList";
import { GoodCatalog,GetGoodList } from "../request/api";

export default {
  data() {
    return {
      active: 0,
      brotherCategory: [],
      currentCategory: [],
      goodsList:[],
      id: this.$route.params.id,
    };
  },
  components:{
      ProductList
  },
  methods: {
    btn() {
      let id = this.brotherCategory[this.active].id;
      this.$router.push("/channel/"+id);
      this.getCategoryList();
      this.getCurrentCategory();

      //   this.getCurrentCategory();
    },
    getCategoryList() {
      GoodCatalog({
        id: this.$route.params.id,
      }).then((res) => {
        this.brotherCategory = res.data.brotherCategory;
        this.currentCategory = res.data.currentCategory;
        this.brotherCategory.map((item, i) => {
          if (item.id == this.currentCategory.id) {
            this.active = i;
          }
        });
      });
    },
    getCurrentCategory() {
      GetGoodList({
        page: 1,
        size: 1000,
        categoryId: this.$route.params.id,
      }).then((res) => {
        this.goodsList = res.data.goodsList
        this.value = "";
      });
    },
  },
  created() {
    this.getCategoryList();
    this.getCurrentCategory();
    // this.getCurrentCategory();
  },
};
</script>
 
<style lang = "less" scoped>
.title {
  margin-top: 10px;
  font-size: 18px;
}
.txt {
  text-align: center;
  margin-bottom: 20px;
}

</style>